<template>
    <div>

        <div class="tag-group">
            <span class="tag-box-1 tag-1"></span>
            <div class="tag-group-text">毛利率</div>
            <span class="tag-box-2 tag-2 tag-r"></span>
            <div class="tag-group-text">毛利率增长性</div>
        </div>

        <div id="Chart9" :style="{width: '100%', height: '300px'}"></div>

        <table border="1" bordercolor="#E6E7E8">
            <tr>
                <th></th>
                <th v-for="(item,index) in chartData" :key="index">{{ item.year }}年报</th>
            </tr>
            <tr>
                <td>
                    <span class="tar-box-1 tar-1"></span>
                </td>
                <td v-for="(item,index) in chartData" :key="index">{{ item.profit | Scale }}%</td>
            </tr>
            <tr>
                <td>
                    <span class="tar-box-2 tar-2"></span>
                </td>
                <td v-for="(item,index) in chartData" :key="index">{{ item.waveScale | Scale }}%</td>
            </tr>
            <tr>
                <td></td>
                <td v-for="(item,index) in chartData" :key="index">
                    <img :src="IMG_URL + '/tag-3.png'" class="avatar" v-if="item.risk == 0">
                    <img :src="IMG_URL + '/tag-5.png'" class="avatar" v-if="item.risk == 1">
                    <p class="desc">{{ item.risk == 1 ? '差劲' : '卓越' }}</p>
                </td>
            </tr>
        </table>
    </div>

</template>

<script>

    import {productPower} from "../../api/index";

    export default {
        name: "echart9",
        data() {
            return {
                chartData: [],
                yearArr: [],
            }
        },
        filters: {
            Scale(val){
                return (val * 100).toFixed(2)
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            async init() {
                let tscode = this.$route.query.tscode;
                let Chart = this.$echarts.init(document.getElementById('Chart9'));
                let yearArr = [];
                let profitArr = [];
                let waveScaleArr = [];

                await productPower(tscode).then(res => {
                    this.chartData = res;

                    res.forEach(item=>{
                        yearArr.push(item.year);
                        profitArr.push(parseFloat((item.profit * 100).toFixed(2)));
                        waveScaleArr.push(parseFloat((item.waveScale * 100).toFixed(2)));
                    });

                    let option = {
                        height: '210px',
                        color: '#6467F0',
                        grid: {
                            y: '50',
                        },
                       /* legend: {
                            data: [
                                {
                                    name: '毛利率',
                                    icon:'image:///static/1.png',
                                    textStyle: {
                                        color: '#333'
                                    }
                                },
                                {
                                    name: '毛利率增长性',
                                    icon:'image:///static/2.png',
                                    textStyle: {
                                        color: '#333'
                                    }
                                }
                            ],
                            left: '0',
                            top: '0',
                        },*/
                        xAxis: {
                            data: yearArr
                        },
                        yAxis: [
                            {
                                name: '毛利率',
                                type: 'value',
                                position: 'right',
                                axisLabel: {
                                    formatter: '{value}%'
                                },
                                axisLine:{
                                    show: false,
                                    lineStyle: {
                                        color: '#999999'
                                    }
                                }
                            },
                            {
                                name: '毛利率增长性',
                                type: 'value',
                                position: 'left',
                                axisLabel: {
                                    formatter: '{value}%'
                                },
                                axisLine:{
                                    lineStyle: {
                                        color: '#999999'
                                    }
                                },
                                splitLine: false
                            }
                        ],
                        series: [
                            {
                                name: '毛利率',
                                type: 'bar',
                                data: profitArr,
                                barWidth: '20px'
                            },
                            {
                                name: '毛利率增长性',
                                data: waveScaleArr,
                                type: 'line',
                                yAxisIndex: 1,
                                itemStyle: {
                                    color: '#FA5151'
                                },
                                lineStyle: {
                                    normal: {
                                        color: '#FA5151'
                                    }
                                },
                                areaStyle: {
                                    color: '#FA5151',
                                    opacity: 0.1
                                }
                            },

                        ]
                    };
                    Chart.setOption(option);
                });
            }
        }
    }
</script>

<style scoped lang="less">
    table{
        margin-top: 0px;
        width: 100%;
        font-size: 12px;
        font-weight: 500;
        zoom: 0.95;

        th,td{
            height: 30px;
            line-height: 30px;
        }

        .avatar{
            width: 24px;
            position: relative;
            top: 5px;
        }
        .desc{
            margin-top: -8px;
            margin-bottom: -6px;
        }
    }
</style>
